<template>
    <div class="full-layout flex-between" v-if="flag==='collapse'">
        <div
        style="margin-left:10px"
        @click.stop="null">
            {{time}}
        </div>
        <transition name="clock">
            <div
            v-if="!visible"
            class="horse-race"
            style="margin-right:10px"
            @click.stop="null">
                {{week}}
            </div>
        </transition>

        <transition name="clock">
            <div
            v-if="visible"
            class="horse-race"
            style="margin-right:10px"
            @click.stop="null">
                {{date}}
            </div>
        </transition>
    </div>
    <div class="full-layout flex-column-center" v-if="flag==='expand'"> 
        <div
        style="font-size: 30px;font-weight: 600;"
        @click.stop="null">
            {{time}}
        </div>

        <div
        style="font-size: 15px; margin-top: 10px;"
        @click.stop="null">
            {{date1}}
        </div>
    </div>
 </template>

<script lang='ts'>
import { formatWeek } from '@/utils/util';
import { onMounted, reactive, toRefs } from 'vue';
export default {
    name:'clockIsland',
    props: {
        flag:{
            type:String,
            default:''
        }
    },
    components: {

    },
    emits:[],
    setup (props, context) 
    {
        let data = reactive({
            time:'',
            date:'',
            week:'',
            date1:'',
            visible:false
        });
        let methods = {
            getCurrentTime ()
            {
                let date = new Date();
                let yy = date.getFullYear();
                let mm = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                let hh = date.getHours() < 10 ? '0' +  date.getHours() : date.getHours();
                let mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                let day = date.getDay();
                data.time = hh + ':' + mf;
                data.week = formatWeek(day);
                data.date = yy + '/' + mm + '/' + dd;
                data.date1 = yy + '/' + mm + '/' + dd + ' ' + formatWeek(day);
            }
        };

        onMounted(() => 
        {
            methods.getCurrentTime();
            setInterval(() => 
            {
                data.visible = !data.visible;
            }, 3000);
        });
        return { 
            ...toRefs(data),
            ...methods
        };
    }
};
</script>
 
 <style scoped lang="scss">
  @keyframes show {
    from {
        top:100%;
        opacity: 0;
    }
    to {
        top: 50%;
        opacity: 1;
    }
 }

 @keyframes hide {
    from {
        top: 50%;
        opacity: 1;
    }
    to {
        top:-100%;
        opacity: 0;
    }
 }

 .clock-enter-active {
    animation: show .3s linear 0s forwards;
 }

 .clock-leave-active {
    animation: hide .3s linear 0s forwards;
}

.horse-race {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
 </style>
 